<template>
  <div>
    <el-table
    class="my-table"
    :data="tableData"
    :height="height"
    :span-method="objectSpanMethod"
    :header-cell-style="headerStyle"
    @cell-click="cellClick"
    :cell-style="cellStyle"
    style="width: 100%; margin-top: 20px">
      <tableCol v-for="(item, index) in columns" :col="item" :key="index"></tableCol>
    </el-table>
  </div>
</template>

<script>
import tableCol from './tableCol.vue'
  export default {
    name: 'shareTable',
    components: {
      tableCol
    },
    props: {
      id: {
        type: String,
        default: '',
      },
      title: {
        type: String,
        default: ''
      },
      columns: {
        type: Array,
        default: () => []
      },
      tableData: {
        type: Array,
        default: () => []
      },
      height: {
        type:Number,
        default: 500
      },
      edit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
       
      };
    },
    mounted() {
      
    },
    methods: {
      cellClick(row, column, cell, event) {
        if(this.edit) {
          this.$emit('cellClick', {row, column, cell, event})
        }
      },
      cellStyle({row, column, rowIndex, columnIndex}) {
        if (!!row[column.property] && typeof row[column.property] != 'string' &&  row[column.property].hasOwnProperty('color') && !!row[column.property].color) {
          return `background:  ${row[column.property].color};border-right: 0`
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {        
        return {
          rowspan: row[column.property] && row[column.property].hasOwnProperty('totalRow') ? row[column.property].totalRow : 1,
          colspan: row[column.property] && row[column.property].hasOwnProperty('totalCol') ? row[column.property].totalCol : 1
        };
      },
      headerStyle({row, column, rowIndex, columnIndex}) {
        this.$nextTick(() => {
          let keylist = column.columnKey.split('-')

          if (keylist[0] != 0) {
            Array.from(document.getElementsByClassName(column.id)).forEach(dom => {
              dom.setAttribute('rowSpan',Number(keylist[0]));
            });
          }
          if (keylist[1] != 0) {
            Array.from(document.getElementsByClassName(column.id)).forEach(dom => {
              dom.setAttribute('colSpan',Number(keylist[1]))
            });
          }
          if (keylist[2] === '0') {
            Array.from(document.getElementsByClassName(column.id)).forEach(dom => {
              dom.style.display = 'none'
              dom.setAttribute('rowSpan', 0);
            });
          }
        })
      }
    }
  };
</script>
<style lang="less" scoped>
.my-table {
  font-size: 12px;
  /deep/ .el-table__header thead {
     color: #000;
    tr:last-of-type {
        display: none;
      }
  }
  /deep/ .el-table__cell {
    padding: 0
  }
  /deep/ .cell {
    padding: 0!important;
    min-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/.is-hidden {
    display: table-cell;
  }
  /deep/.el-table__cell.is-hidden>* {
    visibility: inherit;
  }
}


</style>